<template>
  <div>
    <div class="com-chart">
      <div class="pie" ref="type_pie"></div>
      <div class="pie" ref="assortment_pie"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData:null,
      typeOfA: 0,
      typeOfB: 0,
      typeOfC: 0,
      typeOfD: 0,
      assortmentOfA: 0,
      assortmentOfB: 0,
      assortmentOfC: 0,
      assortmentOfD: 0,
    }
  },
  mounted() {
    this.initCharta(),
    this.initChartb()
  },
  methods: {
    findType(data, str){
      let num = 0;
      for(let item in data) {
        if(data[item]['StoreType'] == str) {
          num+=1
        }
      }
      return num;
    },
    findAssortment(data, str){
      let num = 0;
      for(let item in data) {
        if(data[item]['Assortment'] == str) {
          num+=1
        }
      }
      return num;
    },
    async initCharta () {
      const {data : ret} = await axios.get("https://vimeriochen.gitee.io/visualization/data/store.json",);
      this.allData = ret;
      this.typeOfA = this.findType(this.allData,'a');
      this.typeOfB = this.findType(this.allData,'b');
      this.typeOfC = this.findType(this.allData,'c');
      this.typeOfD = this.findType(this.allData,'d');
      this.chartInstance = this.$echarts.init(this.$refs.type_pie,'walden')
      // 对图表初始化配置的控制
      const initOption = {
        title: {
          text: '▎Type',
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center'
        },
        series: [
          {type: 'pie',
            data: [
              {value: this.typeOfA,name: 'A'},
              {value: this.typeOfB,name: 'B'},
              {value: this.typeOfC,name: 'C'},
              {value: this.typeOfD,name: 'D'},
            ],
            // roseType: 'area',
            label: {
              show: true,
              position: 'right',
            },
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
     async initChartb () {
      const {data : ret} = await axios.get("https://vimeriochen.gitee.io/visualization/data/store.json",);
      this.allData = ret;
      this.assortmentOfA = this.findAssortment(this.allData,'a');
      this.assortmentOfB = this.findAssortment(this.allData,'b');
      this.assortmentOfC = this.findAssortment(this.allData,'c');
      this.assortmentOfD = this.findAssortment(this.allData,'d');
      this.chartInstance = this.$echarts.init(this.$refs.assortment_pie,'walden')
      // 对图表初始化配置的控制
      const initOption_assortment = {
        title: {
          text: '▎Assortment',
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center'
        },
        series: [
          {type: 'pie',
            data: [
              {value: this.assortmentOfA,name: 'A'},
              {value: this.assortmentOfB,name: 'B'},
              {value: this.assortmentOfC,name: 'C'},
              {value: this.assortmentOfD,name: 'D'},
            ],
            
            // roseType: 'area',
            label: {
              show: true,
              position: 'right',
            },
          }
        ]
      }
      this.chartInstance.setOption(initOption_assortment)
    },
  }
}
</script>


<style scoped>
.com-chart {
  margin: auto;
  margin-top:50px;
  display: flex;
  width: 80%;
}
.pie {
  flex: 1; 
  height: 500px;
  width: 500px; 
}
</style>
